import DocCardBox from "@/components/doc-card"
import React from "react"
import { DemoL1, demoL1Json } from "./demo/DemoL1"
import { DemoL2, demoL2Json } from "./demo/DemoL2"
import { DemoR1, demoR1Json } from "./demo/DemoR1"
import { DemoR2, demoR2Json } from "./demo/DemoR2"
import { DemoR3, demoR3Json } from "./demo/DemoR3"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "baseUse",
        hash: "img-l-demo1",
        coms: [<DemoL1 key={0} />],
        comsJson: [demoL1Json],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "imgl_1_1_1" }, { text: "imgl_1_1_2", textType: "a", href: "https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver" }, { text: "imgl_1_1_3" }, { text: "imgl_1_1_4", textType: "tag" }, { text: "imgl_1_1_5" }, { text: "imgl_1_1_6", textType: "tip" }]
            }
        ]
    },
    {
        titleKey: "img_t_1",
        hash: "img-l-demo2",
        coms: [<DemoL2 key={0} />],
        comsJson: [demoL2Json],
        desc: [
            {
                textType: "texts",
                texts: [
                    { text: "imgl_2_1_1" },
                    { text: "imgl_2_1_2", textType: "tag" },
                    { text: "imgl_2_1_3" },
                    { text: "imgl_2_1_4", textType: "tag" },
                    { text: "imgl_2_1_5" },
                    { text: "imgl_2_1_6", textType: "a", href: "https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading" },
                    { text: "imgl_2_1_7" },
                    { text: "imgl_2_1_8", textType: "tip" },
                    { text: "imgl_2_1_2", textType: "tag" },
                    { text: "imgl_2_1_9" },
                    { text: "imgl_2_1_10", textType: "tag" },
                    { text: "imgl_2_1_11" },
                    { text: "imgl_2_1_12", textType: "tip" }
                ]
            }
        ]
    }
]

const rightList = [
    {
        titleKey: "scrollType",
        hash: "img-r-demo1",
        coms: [<DemoR1 key={0} />],
        comsJson: [demoR1Json],
        desc: [{ text: "imgr_1_1_1" }]
    },
    {
        titleKey: "errorImg",
        hash: "img-r-demo2",
        coms: [<DemoR2 key={0} />],
        comsJson: [demoR2Json],
        desc: [{ text: "imgr_2_1_1" }]
    },
    {
        titleKey: "bgImg",
        hash: "img-r-demo3",
        coms: [<DemoR3 key={0} />],
        comsJson: [demoR3Json],
        desc: [{ text: "imgr_3_1_1" }, { text: "imgr_3_1_2", textType: "tag" }, { text: "imgr_3_1_3" }]
    }
]

function Image() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "ImgProps",
            data: [
                {
                    schema: "src",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_srd")
                },
                {
                    schema: "errorUrl",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_errorUrl")
                },
                {
                    schema: "classNames",
                    type: "ImgClassNames",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_cns")
                },
                {
                    schema: "lazy",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_lazy")
                }
            ]
        },
        {
            title: "ImgClassNames",
            data: [
                {
                    schema: "box",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("img_cls_box")
                },
                {
                    schema: "img",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("img_cls_img")
                }
            ]
        },
        {
            title: "BgImgProps",
            data: [
                {
                    schema: "url",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_srd")
                },
                {
                    schema: "isLazy",
                    type: "boolean",
                    defaultValue: "true",
                    isRequire: t("no"),
                    desc: t("desc_lazy")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Img/BgImg" desc="imgDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default Image
